<template>
    <el-dialog :close-on-click-modal="false" :title="mainTitleName()" v-model="visible" :width="1100" custom-class="notpt"
    destroy-on-close @closed="$emit('closed')">
        <el-container>
            <el-container class="is-vertical">
                <div class="panel-search-box" style="padding-left:0px;">
                    <div class="panel-search">
                        <el-input v-model="search.title" placeholder="标题" clearable style="margin-left:0px;"></el-input>
                        <el-select v-model="search.status" placeholder="状态" clearable>
                            <el-option label="启用" :value="1"></el-option>
                            <el-option label="禁用" :value="0"></el-option>
                        </el-select>
                        <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                        <el-button type="primary" icon="el-icon-plus" @click="add" v-if="permission.add">增加</el-button>
                        <!-- <el-button type="primary" icon="el-icon-download" @click="table_import" v-if="permission.add">导入</el-button> -->
                        <el-button v-if="permission.delete" type="danger" plain icon="el-icon-delete" :disabled="!selection.length" @click="batch_delete">批量删除</el-button>
                    </div>
                </div>
                <el-main class="nopadding">
                    <scDialogTable ref="table" :apiObj="$API.courseArticle.list" remoteSort :params="search" :height="500" @dataChange="dataChange" @selection-change="selectionChange"
                    :rowKey="getRowKeys">
                        <el-table-column type="selection" width="50" :reserve-selection="true"></el-table-column>
                        <el-table-column label="序号" prop="index" width="70" align="left"></el-table-column>
                        <el-table-column label="标题" prop="title" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column label="状态" prop="status" width="80" align="center">
                            <template #default="scope">
                                <el-tag size="mini" v-if="scope.row.status.value == 0" type="danger">{{scope.row.status.name}}</el-tag>
                                <el-tag size="mini" v-if="scope.row.status.value == 1" type="success">{{scope.row.status.name}}</el-tag>
                                <el-tag size="mini" v-if="scope.row.status.value == 2" type="warning">{{scope.row.status.name}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="排序" prop="sort" align="center" width="80"></el-table-column>
                        <el-table-column label="创建时间" prop="createdAt" width="150" align="center"></el-table-column>
                        <el-table-column label="操作" fixed="right" align="center" :width="category===8?260:240">
                            <template #default="scope">
								<el-button v-if="permission.question && category === 8" type="text" size="small"  @click="table_course_article_sentence(scope.row)">词串管理</el-button>
                                <el-divider v-if="permission.question && (category === 4 || category === 8)" direction="vertical"></el-divider>
                                <el-button v-if="permission.question && (category === 4 || category === 8)" type="text" size="small"  @click="table_question(scope.row)">题目管理</el-button>
                                <el-divider direction="vertical" v-if="permission.edit && scope.row.status.value != 2"></el-divider>
                                <el-button v-if="permission.edit && scope.row.status.value != 2" type="text" size="small" @click="table_edit(scope.row)">编辑</el-button>
                                <el-divider v-if="permission.delete" direction="vertical"></el-divider>
                                <el-popconfirm v-if="permission.delete" :title="'确认是否删除此文章?'" @confirm="table_del(scope.row)">
                                    <template #reference>
                                        <el-button type="text" size="small">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </scDialogTable>
                </el-main>
            </el-container>
        </el-container>
    </el-dialog>

    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>

    <question-dialog v-if="dialog.question" ref="questionDialog" @success="handleSuccess" @closed="dialog.question=false"></question-dialog>

	<course-article-sentence-dialog v-if="dialog.courseArticleSentence" ref="courseArticleSentenceDialog" @success="handleSuccess" @closed="dialog.courseArticleSentence=false"></course-article-sentence-dialog>

    <import-dialog v-if="dialog.import" ref="importDialog" @success="handleSuccess" @closed="dialog.import=false" :courseId="course.id"></import-dialog>
    <knowledge-dialog v-if="dialog.knowledge" ref="knowledgeDialog" @success="handleSuccess" @closed="dialog.knowledge=false"></knowledge-dialog>
</template>

<script>
import { rolePermission } from '@/utils/permission'
import saveDialog from './save.vue'
import questionDialog from '../../articleQuestion/index.vue'
import courseArticleSentenceDialog from '../articleSentence/index.vue'
import importDialog from './import.vue'
export default {
    components: {
        saveDialog,
        questionDialog,
        importDialog,
		courseArticleSentenceDialog
    },
    data() {
        return {
            visible: false,
			category: '',
            selection: [],
            course: {},
			sentence: {},
            dialog: {
                save: false,
                question: false,
                picture: false,
                import: false
            },
            search: {
                name: null,
                courseId: null,
				sentencesId: null,
            },
            permission: {
                add: rolePermission('course-article-add'),
                edit: rolePermission('course-article-edit'),
                delete: rolePermission('course-article-delete'),
                question: rolePermission('course-question-view'),
            }
        }
    },
    mounted() {
    },
    methods: {
        open(category,row) {
            this.visible = true
            this.category = category
			if (category===4 || category ===6){
				this.course = row
				this.search.courseId = row.id
			}

			if (category===8){
				this.sentence = row
				this.search.sentencesId = row.id
			}
            return this
        },
        dataChange(res, tableData) {
			let total = res.data.total
            let perPage = res.data.perPage
            let page = (this.$refs.table && this.$refs.table.currentPage) || 1
            tableData.forEach((item, index) => {
				item.index = total - (page * perPage + index - perPage)
            })
        },
        getRowKeys(row) {
            return row.id
        },
        //添加
        add() {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('add',this.category, this.course,this.sentence)
            })
        },
        //导入
        table_import() {
            this.dialog.import = true
            this.$nextTick(() => {
                this.$refs.importDialog.int()
            })
        },
        //编辑
        table_edit(row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('edit', this.category, this.course,this.sentence).setData(row)
            })
        },
        //删除
        async table_del(row) {
            await this.$API.courseArticle.action.delete({ id: row.id }).then(() => {
                this.$refs.table.refresh()
                this.$notify.success("删除成功")
            })
        },
        //题目管理
        table_question(row) {
            this.dialog.question = true
            this.$nextTick(() => {
                this.$refs.questionDialog.open(row)
            })
        },
		//词语串管理
		table_course_article_sentence(row) {
			this.dialog.courseArticleSentence = true
			this.$nextTick(() => {
				this.$refs.courseArticleSentenceDialog.open(this.category,row)
			})
		},

        //表格选择后回调事件
         selectionChange(selection) {
            this.selection = selection
        },
        //批量删除
        batch_delete() {
            this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
                type: 'warning'
            }).then(async () => {
                let idsArr = this.selection.map(item => { return item.id })
                await this.$API.courseArticle.batch.delete({ids: idsArr}).then(res => {
                    this.$notify.success("删除成功")
                    this.$refs.table.refresh()
                })
            }).catch(() => {

            })
        },
        // 搜索
        upsearch() {
            this.$refs.table.upData(this.search)
        },
        //本地更新数据
        handleSuccess() {
            this.$refs.table.refresh()
        },
		mainTitleName() {
			let titleName = '阅读文章管理';
			if (this.category === 8 && this.sentence !== null) {
				titleName = `【${this.sentence.title}】关卡管理`;
			} else if (this.category === 4 && this.course != null) {
				titleName = `【${this.course.name}】绘本管理`;
			}
			else if (this.category === 6 && this.course != null) {
				titleName = `【${this.course.name}】`;
			}
			return titleName;
		}
    }
}
</script>

<style>
.audio {
    width: 0;
    height: 0;
    display: none;
}

/* dialog内上边距设置 */
.position {
    display: flex;
    align-items: center;
}
.position-item {
    margin-right: 5px;
}
.position-item:last-child {
    margin-right: 0;
}
/* dialog内上边距设置 END */
</style>
